<template>
  <el-dialog
    title="添加家庭成员"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    @open="onOpen"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      @submit.native.prevent="onSubmit"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="成员关系：" prop="relation">
            <el-select v-model="form.relation">
              <el-option
                v-for="(item,index) in familyList"
                :key="index"
                :value="item.id"
                :label="item.desc"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="form.relation"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="form.name"></el-input>
            <!-- <el-select v-model="form.name" @change="getFamilyInfo" value-key="patientId" remote
                            reserve-keyword
                            filterable
                            :remote-method="remoteMethod">
                <el-option v-for="(item,index) in tableList" :key="index" :value="item" :label="item.name"></el-option>
            </el-select>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
              <!-- <el-radio :label="0">不详</el-radio> -->
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月日：" prop="birthday">
            <el-date-picker v-model="form.birthday" :picker-options="pickerNow" value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="form.mobile" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="绑定微信：" prop="openId">
            <el-input v-model="form.openId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
          <el-col :span="24">
             <v-area v-model="form.areaArray"></v-area>
          </el-col>
      </el-row>-->
      <el-button v-show="false" :loading="btnLoading" native-type="submit">提交</el-button>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import validate from "@/_js/validate";
export default {
  props: ["value", "detail", "curItem", "type"],
  data() {
    return {
      btnLoading: false,
      form: {
        sex: 1,
        name: "",
        relation: "",
        birthday: "",
        mobile: "",
        openId: "",
        age: "",
        patientId: ""
      },
       pickerNow: { 
            disabledDate(time) {
                return time.getTime() > Date.now();//如果没有后面的-8.64e7就是不可以选择今天的 
            }
      },
      name: "",
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        relation: [{ required: true, message: "请选择家庭关系", trigger: "change" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" },
        {validator: validate.vPhone, message: "请输入正确的手机号", trigger: "blur" }
        ],
        openId: [
          {
            required: false,
            trigger: "blur",
            message: "请输入正确的微信号",
            validator: validate.NoHanZi
          }
        ]
      },
      familyList: [],
      tableList: []
    };
  },
  mounted() {
    this.getBasicData();
    this.onOpen();
  },
  methods: {
    onSubmit() {
      let th = this;
      th.btnLoading = true;
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let age = 0;
      let bir_year = "";
      let bir_month = "";
      let birthday = th.form.birthday;
      if (birthday != null) {
        bir_year = birthday.substring(0, 4);
        bir_month = birthday.substring(6, 7);
        age = year - bir_year;
      }
      th.form.age = age;
      if (th.type != "edit") {
        th.form.patientId = th.detail.patientId;
      }
      let list = [];
      list.push(th.form);
      if (th.type == "edit") {
        th.$refs["form"].validate(v => {
          if (v) {
            th.$api
              .updatePatientFamily({
                patientId: th.form.patientId,
                patientRelation: JSON.stringify(list)
              })
              .then(res => {
                if (res.executed) {
                  th.$message.success("操作成功");
                  th.$emit("success");
                  th.btnLoading = false;
                  th.onClose();
                } else {
                  th.$message.error(res.message);
                  th.btnLoading = false;
                }
              });
          }else{
            th.btnLoading = false;
          }
        });
      } else {
        th.$refs["form"].validate(v => {
          if (v) {
            th.$api
              .addPatientFamily({
                patientId: th.detail.patientId,
                patientRelation: JSON.stringify(list)
              })
              .then(res => {
                if (res.executed) {
                  th.$message.success("操作成功");
                  th.btnLoading = false;
                  th.$emit("success");
                  th.onClose();
                } else {
                  th.$message.error(res.message);
                  th.btnLoading = false;
                }
              });
          }else{
            th.btnLoading = false;
          }
        });
      }
    },
    getFamilyInfo(item) {
      let th = this;
      th.form = Object.assign(th.form, item);
    },
    getBasicData() {
      let th = this;
      th.getCommonConfigByKey("患者关系").then(res => {
        th.familyList = res;
      });
      th.$api
        .getThePatientLibraryList({
          hpId: th.adminUser.hpId,
          pageNum: 1,
          pageSize: 20
        })
        .then(res => {
          if (res.executed) {
            this.tableList = res.dataBody.list;
          }
        });
    },
    remoteMethod(query) {
      let th = this;
      th.$api
        .getThePatientLibraryList({
          hpId: th.adminUser.hpId,
          pageNum: 1,
          pageSize: 20,
          nameOrMobile: query
        })
        .then(res => {
          if (res.executed) {
            this.tableList = res.dataBody.list;
          }
        });
    },
    onOpen() {
      let th = this;
      if (th.type == "edit") {
        th.form = Object.assign(th.form, th.curItem);
      }
    },
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    }
  }
};
</script>
